@textColor: #2c3e50;
@codeBgColor: #282c34;
@lineNumbersWrapperWidth: 3.5rem;

// .content {
//     code {
//         color: lighten(@textColor, 20%);
//         padding: 0.25rem 0.5rem;
//         margin: 0;
//         font-size: 0.85em;
//         background-color: rgba(27,31,35,0.05);
//         border-radius: 3px;
//     }
// }

// .content {
//     pre,
//     pre[class*="language-"] {
//         line-height: 1.4;
//         padding: 1.25rem 1.5rem;
//         margin: 0.85rem 0;
//         background-color: @codeBgColor;
//         border-radius: 6px;
//         overflow: auto;
//     }

//     code {
//         color: #fff;
//         padding: 0;
//         background-color: transparent;
//         border-radius: 0;
//     }
// }

div[class*="language-"] {
    position: relative;
    background-color: @codeBgColor;
    border-radius: 6px;
    .highlight-lines {
        user-select: none;
        padding-top: 1.3rem;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        line-height: 1.4;
        .highlighted {
            background-color: rgba(0, 0, 0, 66%);
        }
    }
    pre,
    pre[class*="language-"] {
        background: transparent;
        position: relative;
        z-index: 1;
        line-height: 1.4;
        padding: 1.25rem 1.5rem;
        margin: 0.85rem 0;
        border-radius: 6px;
        overflow: auto;
    }

    code {
        margin: 0;
        font-size: 0.85em;
        color: #fff;
        padding: 0;
        background-color: transparent;
        border-radius: 0;
    }
    &::before {
        position: absolute;
        z-index: 3;
        top: 0.8em;
        right: 1em;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.4);
    }
    &:not(.line-numbers-mode) {
        .line-numbers-wrapper {
            display: none;
        }
    }
    &.line-numbers-mode {
        .highlight-lines .highlighted {
            position: relative;
            &:before {
                content: ' ';
                position: absolute;
                z-index: 3;
                left: 0;
                top: 0;
                display: block;
                width: @lineNumbersWrapperWidth;
                height: 100%;
                background-color: rgba(0, 0, 0, 66%);
            }
        }
        pre {
            padding-left: @lineNumbersWrapperWidth + 1 rem;
            vertical-align: middle;
        }
        .line-numbers-wrapper {
            position: absolute;
            top: 0;
            width: @lineNumbersWrapperWidth;
            text-align: center;
            color: rgba(255, 255, 255, 0.3);
            padding: 1.25rem 0;
            line-height: 1.4;
        }
        br {
            user-select: none;
        }
        .line-number {
            position: relative;
            z-index: 4;
            user-select: none;
            font-size: 0.85em;
        }
        &::after {
            content: '';
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: @lineNumbersWrapperWidth;
            height: 100%;
            border-radius: 6px 0 0 6px;
            border-right: 1px solid rgba(0, 0, 0, 66%);
            background-color: @codeBgColor;
        }
    }
}


// for lang in $codeLang
//   div{'[class~="language-' + lang + '"]'}
//     &:before
//       content ('' + lang)

div[class~="language-javascript"] {
    &:before {
        content: "js";
    }
}

div[class~="language-typescript"] {
    &:before {
        content: "ts";
    }
}

div[class~="language-markup"] {
    &:before {
        content: "html";
    }
}

div[class~="language-markdown"] {
    &:before {
        content: "md";
    }
}

div[class~="language-json"] {
    &:before {
        content: "json";
    }
}

div[class~="language-ruby"] {
    &:before {
        content: "rb";
    }
}

div[class~="language-python"] {
    &:before {
        content: "py";
    }
}

div[class~="language-bash"] {
    &:before {
        content: "sh";
    }
}
